<script setup>
import { constant } from 'lodash'
import { reactive } from 'vue-demi'
const { proxy } = getCurrentInstance()
const ruleFormRef = ref(null)
const props = defineProps({
  data: {
    type: Object,
    default: {}
  },
  isShow: {
    type: Boolean,
    default: false
  },
  // 类别判断及上级编码
  leftTreeData: {
    type: Object,
    default: {}
  }
})

const newRef = ref(null)
const isOut = ref(true)
const Isif = ref(false)

// 新建仓库表单 字段
const addForm = reactive({
  warehouseType: '', // 类型
  warehouseTypeDict: '', // 类型翻译
  parentCode: '', //上级编码
  warehouseCode: '', //编码
  warehouseName: '', //名称
  volume: '', //容积
  capacity: '', //容量
  badArea: '1', //不良区域  默认值:1为关
  remark: '', //备注
  addType: '', //新增方式
  codePrefix: '', //编码前缀
  startCode: '', //起始编码
  number: '', // 数量
  id: '' //id
})
// 新增仓库 校验规则
const newRules = reactive({
  // 编码
  warehouseCode: [
    { required: true, message: '请输入', trigger: 'blur' },
    { validator: proxy.noChinese, trigger: 'blur' }
  ],
  // 名称
  warehouseName: [{ required: true, message: '请输入', trigger: 'blur' }],
  // 新增方式
  addType: [
    {
      required: true,
      message: '请选择',
      trigger: 'change'
    }
  ],

  // 起始编码
  startCode: [{ required: true, message: '请输入', trigger: 'blur' }],
  // 数量
  number: [{ required: true, message: '请输入', trigger: 'blur' }]
})
// 回显数据赋值
watchEffect(() => {
  if (typeof props.data == 'object' && props.data?.id) {
    for (let Key in props.data) {
      addForm[Key] = props.data[Key]
    }
  }
  // // console.log(props.leftTreeData.warehouseCode, '------------')
  // 通过有无上级编码判断
  if (props.leftTreeData.parentCode) {
    if (props.leftTreeData.warehouseType == 1) {
      addForm.warehouseType = 2
      addForm.warehouseTypeDict = '库区'
    } else {
      addForm.warehouseType = 3
      addForm.warehouseTypeDict = '库位'
      // addForm.parentCode = props.leftTreeData.parentCode
    }
    //把从父组件的leftTreeData数据赋值给表单的上级编码
    addForm.parentCode = props.leftTreeData.warehouseCode
    // addForm.warehouseTypeDict = props.leftTreeData.warehouseTypeDict
    addForm.id = props.leftTreeData.id
  } else {
    addForm.warehouseType = '1'
    addForm.warehouseTypeDict = '仓库'
    addForm.parentCode = '\\'
  }
})
// 判断个人和批量
const ediSelect = val => {
  // console.log(val, 'nihao1')
  if (val == 2) isOut.value = false
  val == 1 ? (Isif.value = false) : (Isif.value = true)
}

// 提交数据
const submit = () => {
  return new Promise((resolve, reject) => {
    newRef.value.validate(valid => {
      if (!valid) {
        proxy.warningMsg('请填写完整')
        resolve(false)
      } else {
        resolve(addForm)
      }
    })
  })
}
defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <!-- 新增仓库 表单 -->
    <el-form
      :model="addForm"
      label-width="120px"
      class="demo-ruleForm"
      :rules="newRules"
      status-icon
      inline
      ref="newRef"
    >
      <el-form-item label="类别">
        <el-input v-model="addForm.warehouseTypeDict" disabled />
      </el-form-item>
      <el-form-item label="上级编码">
        <el-input v-model="addForm.parentCode" disabled />
      </el-form-item>
      <el-form-item label="新增方式" prop="addType" v-if="props.isShow">
        <el-select v-model="addForm.addType" class="m-2" placeholder="请选择" @change="ediSelect">
          <el-option
            v-for="item in [
              {
                label: '个人',
                value: 1
              },
              {
                label: '批量',
                value: 2
              }
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="warehouseName">
        <el-input v-model="addForm.warehouseName" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="起始编码" prop="startCode" v-if="props.isShow && Isif">
        <el-input v-model="addForm.startCode" placeholder="请输入编码" />
      </el-form-item>
      <el-form-item label="数量" prop="number" v-if="props.isShow && Isif">
        <el-input v-model="addForm.number" placeholder="请输入数量" />
      </el-form-item>
      <el-form-item label="编码" prop="warehouseCode" v-if="isOut">
        <el-input v-model="addForm.warehouseCode" placeholder="请输入编码" />
      </el-form-item>
      <el-form-item label="编码前缀" v-if="props.isShow && Isif">
        <el-input v-model="addForm.codePrefix" placeholder="请输入编码" />
      </el-form-item>
      <el-form-item label="容积(立方米)">
        <el-input type="number" oninput="if(value<=0)value=''" v-model="addForm.capacity" placeholder="请输入容积" />
      </el-form-item>
      <el-form-item label="容量(吨)">
        <el-input type="number" oninput="if(value<=0)value=''" v-model="addForm.volume" placeholder="请输入容量" />
      </el-form-item>
      <div>
        <el-form-item label="不良区域">
          <p-switch v-model="addForm.badArea" />
        </el-form-item>
      </div>
      <div class="flex-items-center textareaClass">
        <el-form-item label="备注">
          <el-input
            type="textarea"
            placeholder="请输入备注"
            v-model="addForm.remark"
            :input-style="{
              width: '100%'
            }"
          />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<style scoped>
.title {
  color: #3985fb;
}
label {
  display: inline-block;
  width: 120px;
  text-align: right;
  padding-right: 12px;
}
</style>
